<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/three.js"></script>
</head>
<body>
<script>
    var   sceneWidth=window.innerWidth,
        sceneHeight=window.innerHeight;
    var camera,scene,renderer,cube;
    init();
    animate();
    function init(){
        camera=new THREE.PerspectiveCamera(75,sceneWidth/sceneHeight,1,10000);


        scene=new THREE.Scene();


        renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight)
        document.body.appendChild(renderer.domElement);
        //创建矩形
        var geometry = new THREE.CubeGeometry( 1, 1, 1 );
        var texture = THREE.ImageUtils.loadTexture("earth.jpg", null, function (t) {
        });
        //4.将纹理应用于材质
        var material = new THREE.MeshBasicMaterial({ map: texture });
        cube = new THREE.Mesh( geometry, material );
        scene.add( cube );




        camera.position.z = 5;
    }

    function animate(){
        requestAnimationFrame(animate);
        cube.rotation.x+=0.01;
        cube.rotation.y+=0.01;
        renderer.render(scene,camera);
    }

</script>
</body>
</html>